<template>
  <div>
    <!--/路径 -->
    <div class="w3l-breadcrumbs">
      <nav id="breadcrumbs" class="breadcrumbs">
        <div class="container page-wrapper">
          <a @click="toPage(0)">用户首页</a> »
          <span class="breadcrumb_last" aria-current="page">购票</span>
        </div>
      </nav>
    </div>
    <!--//路径 -->
    <!-- /电影信息-->
    <div class="w3l-ab-grids py-5 banner">
      <div class="container py-lg-4">
        <div class="row ab-grids-sec align-items-center" style="width: 750px">
          <div class="col-lg-6 ab-right" style="width: 300px">
            <img
              class="img-fluid"
              :src="movie.mov_img_path"
              style="height: 400px; border: 6px solid #fff"
            />
          </div>
          <div
            class="col-lg-6 ab-left pl-lg-4 mt-lg-0 mt-5"
            style="width: 1000px"
          >
            <h3 class="hny-title" style="color: #fff">{{ movie.mov_name }}</h3>
            <p class="mt-3" style="color: #fff">简介: {{ movie.mov_desc }}</p>
            <p class="mt-3" style="color: #fff">类型：{{ movie.mov_label }}</p>
            <p class="mt-3" style="color: #fff">
              时长：{{ movie.mov_time }}min
            </p>
            <p class="mt-3" style="color: #fff">评分：{{ movie.mov_score }}</p>
            <div class="ready-more mt-4">
              <table>
                <tr>
                  <td>
                    <div style="width: 40px"></div>
                  </td>
                </tr>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- //电影信息-->
    <!-- 影评-->
    <section class="w3l-grids" style="margin-top: 25px">
      <div>
        <div class="container py-lg-3">
          <div class="biaoti">影评</div>
          <div
            class="headerhny-title"
            style="
              border-style: solid;
              border-width: 0px 1px 4px 1px;
              border-color: rgba(105, 105, 105, 0.137);
            "
          >
            <!-- 所有的短评 -->
            <div style="height: auto; text-align: center">
              <a-comment
                class="changping"
                v-for="longCommentParameter in longComments"
                :key="longCommentParameter.long_com_id"
              >
                <template #author>
                  <a style="color: rgb(255, 81, 81); font-size: 14px">{{
                    longCommentParameter.cust_username
                  }}</a>
                </template>
                <!-- <template #avatar>
                  <a-avatar
                    :src="longCommentParameter.avatar_address"
                    alt="longCommentParameter.cust_username"
                  />
                </template> -->
                <template #content>
                  <p
                    @click="openLongComment(longCommentParameter)"
                    style="
                      text-overflow: ellipsis;
                      font-size: 16px;
                      text-align: left;
                      overflow: hidden;
                      height: 40px;
                      overflow: hidden;
                      white-space: nowrap;
                      text-overflow: ellipsis;
                      -o-text-overflow: ellipsis;
                    "
                  >
                    {{ longCommentParameter.com_text }}
                  </p>
                </template>
                <template #datetime>
                  <a-tooltip
                    :title="
                      moment(longCommentParameter.com_time).format(
                        'YYYY-MM-DD HH:mm:ss'
                      )
                    "
                  >
                    <span>{{
                      moment(longCommentParameter.com_time).fromNow()
                    }}</span>
                  </a-tooltip>
                </template>
              </a-comment>
            </div>

            <div style="margin-left: 20px">
              <div>
                <div style="font-size: 16px"></div>
              </div>
              <a-comment>
                <a-form-item>
                  <div style="width: 60px; float: left; margin-left: 15px">
                    <button
                      class="ant-btn ant-btn-red"
                      @click="openAdd"
                      style="
                        width: 160px;
                        height: 50px;
                        font-size: 19px;
                        font-weight: 530;
                      "
                    >
                      我也要写影评
                    </button>
                  </div>
                </a-form-item>
              </a-comment>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- 影评-->
    <!-- 评论区-->
    <section class="w3l-grids">
      <div>
        <div class="container py-lg-3">
          <div class="biaoti">评论区</div>
          <div class="biaoti2">
            <div style="font-size: 16px">请对该电影打分并评价</div>
            <span @click="openAddComment">
              <a-rate v-model:value="com_score" :tooltips="desc" />
              <span class="ant-rate-text">{{ desc[com_score - 1] }}</span>
            </span>
          </div>

          <div
            class="headerhny-title"
            style="
              border-style: solid;
              border-width: 0px 1px 4px 1px;
              border-color: rgba(105, 105, 105, 0.137);
            "
          >
            <a-comment
              v-for="comment in Comments"
              :key="comment.comment_host_id"
              class="changping"
            >
              <template #actions>
                <span
                  key="comment-nested-reply-to"
                  @click="openReply(comment.comment_host_id)"
                  >回复</span
                >
              </template>
              <template #author>
                <a style="color: red; font-size: 14px">{{
                  comment.cust_username
                }}</a>
              </template>
              <!-- <template #avatar>
                <a-avatar
                  :src="comment.avatar_address"
                  alt="comment.cust_username"
                />
              </template> -->
              <template #content>
                <a-rate :value="comment.com_score" disabled />
                <p>
                  {{ comment.com_text }}
                </p>
              </template>
              <template #datetime>
                <a-tooltip
                  :title="
                    moment(comment.com_time).format('YYYY-MM-DD HH:mm:ss')
                  "
                >
                  <span>{{ moment(comment.com_time).fromNow() }}</span>
                </a-tooltip>
              </template>
              <a-comment
                v-for="chil in comment.child"
                :key="chil.comment_sub_id"
              >
                <template #actions>
                  <span @click="openReply(comment.comment_host_id)">回复</span>
                </template>
                <template #author>
                  <a>{{ chil.cust_username }}</a>
                </template>
                <!-- <template #avatar>
                  <a-avatar
                    :src="chil.avatar_address"
                    alt="chil.cust_username"
                  />
                </template> -->
                <template #content>
                  <p>
                    {{ chil.com_text }}
                  </p>
                </template>
                <template #datetime>
                  <a-tooltip
                    :title="moment(chil.com_time).format('YYYY-MM-DD HH:mm:ss')"
                  >
                    <span>{{ moment(chil.com_time).fromNow() }}</span>
                  </a-tooltip>
                </template>
              </a-comment>
            </a-comment>
            <!-- 评论区-->
            <!-- 设置影评弹框 -->
            <a-modal v-model:visible="visibleAdd" title="写影评" width="1000px">
              <a-textarea
              :rows="12"
                v-model:value="addLongCommentParameter.com_text"
              />
              <template #footer>
                <a-button key="back" @click="handleCancel2">返回</a-button>
                <a-button
                  key="submit"
                  type="primary"
                  :loading="loading"
                  @click="addLongComment"
                  >提交</a-button
                >
              </template>
            </a-modal>
            <!-- 设置回复弹框 -->
            <a-modal v-model:visible="visible" title="回复评论" width="1000px">
              <a-textarea
                :rows="12"
                v-model:value="replyCommentParameter.com_text"
              />
              <template #footer>
                <a-button key="back" @click="handleCancel3">返回</a-button>
                <a-button
                  key="submit"
                  type="primary"
                  :loading="loading"
                  @click="replyComment"
                  >提交</a-button
                >
              </template>
            </a-modal>
            <!-- 设置长评详情弹框 -->
            <a-modal
              v-model:visible="visibleLong"
              title="长评详情"
              width="1000px"
            >
              <a-comment class="changping">
                <template #author>
                  <a style="color: rgb(255, 81, 81); font-size: 14px">{{
                    longCommentDetail.cust_username
                  }}</a>
                </template>
                <!-- <template #avatar>
                  <a-avatar
                    :src="longCommentDetail.avatar_address"
                    alt="longCommentDetail.cust_username"
                  />
                </template> -->
                <template #content>
                  <p style="font-size: 16px; text-align: left">
                    {{ longCommentDetail.com_text }}
                  </p>
                </template>
                <template #datetime>
                  <a-tooltip
                    :title="
                      moment(longCommentDetail.com_time).format(
                        'YYYY-MM-DD HH:mm:ss'
                      )
                    "
                  >
                    <span>{{
                      moment(longCommentDetail.com_time).fromNow()
                    }}</span>
                  </a-tooltip>
                </template>
              </a-comment>
              <template #footer>
                <a-button key="back" @click="handleCancel">返回</a-button>
              </template>
            </a-modal>
            <!-- 设置评分弹框 -->
            <a-modal
              v-model:visible="visibleAddComment"
              title="请对电影进行评价"
              width="1000px"
            >
              <a-textarea
                :rows="12"
                v-model:value="addCommentParameter.com_text"
              />
              <template #footer>
                <a-button key="back" @click="handleCancel1">返回</a-button>
                <a-button
                  key="submit"
                  type="primary"
                  :loading="loading"
                  @click="addComment"
                  >提交</a-button
                >
              </template>
            </a-modal>
          </div>
        </div>
      </div>
    </section>
    <!-- 底部导航栏 -->
    <div class="w3l-footer">
      <section class="footer-inner-main">
        <div class="below-section">
          <div class="container">
            <div class="copyright-footer">
              <div class="columns text-lg-left">
                <p>Copyright &copy; 2020.Company name All rights reserved.</p>
              </div>

              <ul class="social text-lg-right">
                <li>
                  <a href="#facebook"
                    ><span class="fa fa-facebook" aria-hidden="true"></span
                  ></a>
                </li>
                <li>
                  <a href="#linkedin"
                    ><span class="fa fa-linkedin" aria-hidden="true"></span
                  ></a>
                </li>
                <li>
                  <a href="#twitter"
                    ><span class="fa fa-twitter" aria-hidden="true"></span
                  ></a>
                </li>
                <li>
                  <a href="#google"
                    ><span class="fa fa-google-plus" aria-hidden="true"></span
                  ></a>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <!-- copyright -->
        <!-- move top -->
        <button onclick="topFunction()" id="movetop" title="Go to top">
          <span class="fa fa-arrow-up" aria-hidden="true"></span>
        </button>
        <!-- /move top -->
      </section>
    </div>
    <!--//底部导航栏 -->
  </div>
</template>

<script setup>
import moment from "moment";
import { ref } from "vue";
import { useRouter, useRoute } from "vue-router";
import { reactive } from "vue";
import { get, post, tip } from "@/common"; //基础

const router = useRouter();
const route = useRoute();

let mov_id;
const movieList = ref([]);
const movie = ref({
  mov_id: "",
  mov_name: "",
  mov_desc: "",
  mov_score: "",
  mov_img_path: "",
  mov_label: "",
  mov_time: "",
  mov_data: "",
});

const getMov_id = () => {
  mov_id = route.query.mov_id;
};

getMov_id();

const getMoviesById = () => {
  get("/info/movie/moviebyid", { id: mov_id }).then((res) => {
    movieList.value = res.data;
    movie.value = movieList.value[0];
  });
};

getMoviesById();
//影评
const visibleAdd = ref(false);
const addLongCommentParameter = reactive({
  com_text: "",
  cust_username: "",
  mov_id: route.query.mov_id,
});

const longComments = ref([]);

const getLongComment = () => {
  post("/user/long_comment/getComment", { mov_id: route.query.mov_id }).then(
    (res) => {
      longComments.value = res.data;
    }
  );
};
getLongComment();

const openAdd = () => {
  visibleAdd.value = true;
};

const addLongComment = () => {
  get("/user/info").then((res) => {
    addLongCommentParameter.cust_username = res.data.cust_username;
    post("/user/long_comment/addComment", addLongCommentParameter).then(
      (res) => {
        tip.success("提交成功！");
        addLongCommentParameter.com_text = "";
        visibleAdd.value = false;
        getLongComment();
      }
    );
  });
};
const longCommentDetail = ref({});
const visibleLong = ref(false);
const openLongComment = (CommentDetail) => {
  visibleLong.value = true;
  longCommentDetail.value = CommentDetail;
};
const handleCancel = () => {
  visibleLong.value = false;
};
const handleCancel1 = () => {
  visibleAddComment.value = false;
};
const handleCancel2 = () => {
  visibleAdd.value = false;
};
const handleCancel3 = () => {
  visible.value = false;
};
//评论区
const addCommentParameter = reactive({
  com_text: "",
  cust_username: "",
  com_score: "",
  mov_id: route.query.mov_id,
});
//更新评分
const updataPoint = () => {
  post("/search/m_point/point", { mov_id: route.query.mov_id }).then((res) => {
    getMoviesById();
  });
};

const addComment = () => {
  addCommentParameter.com_score = com_score;
  get("/user/info").then((res) => {
    addCommentParameter.cust_username = res.data.cust_username;
    post("/user/comment/addComment", addCommentParameter).then((res) => {
      tip.success("提交成功！");
      addCommentParameter.com_text = "";
      visibleAddComment.value = false;
      getComment();
      updataPoint();
    });
  });
};

const Comments = ref([]);
const getComment = () => {
  post("/user/comment/getComment", { mov_id: route.query.mov_id }).then(
    (res) => {
      Comments.value = res.data;
    }
  );
};
getComment();
//回复
const visible = ref(false);
const host_id = ref();
const openReply = (comment_host_id) => {
  ch_id.value = comment_host_id;
  visible.value = true;
};
let ch_id = ref();
const replyCommentParameter = reactive({
  cust_username: "",
  mov_id: route.query.mov_id,
  com_text: "",
  comment_host_id: "",
});

const replyComment = () => {
  replyCommentParameter.comment_host_id = ch_id;
  get("/user/info").then((res) => {
    replyCommentParameter.cust_username = res.data.cust_username;
    post("/user/comment/replyComment", replyCommentParameter).then((res) => {
      tip.success("回复成功！");
      visible.value = false;
      replyCommentParameter.com_text = "";
      getComment();
    });
  });
};
//打分
const visibleAddComment = ref(false);
const com_score = ref(3);
const desc = ref([
  "太难看惹！！！",
  "难看！",
  "一般般",
  "好评！",
  "太好看惹！！！",
]);
const openAddComment = () => {
  visibleAddComment.value = true;
};
</script>

<style>
.dafen {
  float: left;
  margin-top: 36px;
  height: 65px;
  border-style: solid;
  border-width: 0px 0px 0px 4px;
  border-color: #1890ff;
  padding: 4px;
}
.biaoti {
  font-size: 20px;
  color: rgba(0, 0, 0, 0.8);
  margin-left: 30px;
  margin-bottom: 15px;
  width: 10%;
  border-style: solid;
  border-width: 0px 0px 4px 0px;
  border-color: rgba(24, 144, 255, 0.497);
}
.biaoti2 {
  font-size: 22px;
  color: rgba(0, 0, 0, 0.8);
  margin-left: 30px;
  margin-bottom: 15px;
  width: 30%;
  border-style: solid;
  border-width: 0px 0px 0px 0px;
  border-color: rgba(24, 144, 255, 0.497);
}
.duanping {
  border-style: solid;
  border-width: 1px 4px 4px 0px;
  border-color: #fff;
  width: 300px;
  height: 150px;
  display: inline-block;
  background-color: rgba(105, 105, 105, 0.057);
  padding: 10px;
}
.changping {
  border-style: solid;
  border-width: 2px 4px 4px 2px;
  border-color: #fff;
  height: auto;
  background-color: rgba(105, 105, 105, 0.057);
  padding: 10px;
}
.ant-btn-primary {
  color: #fff;
  background-color: #1890ff;
  border-color: #1890ff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12);
  -webkit-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.045);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.045);
}
.ant-btn-red {
  color: #fff;
  background-color: #1890ff;
  border-color: #1890ff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12);
  -webkit-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.045);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.045);
}
</style>